<script setup lang="ts">
import goodsWaterfall from './goodsWaterfall.vue';
</script>
<template>
    <view>
        <view class="product-tabs">
            <view class="tab">
                <view class="flex flex-align-center">
                    <text>价格</text>
                    <view class="margin-top-5 margin-left-10">
                        <uv-icon name="arrow-down-fill" size="10"></uv-icon>

                    </view>
                </view>

            </view>
            <view class="tab">
                <text>已折扣</text>
                <view class="margin-top-5 margin-left-10">
                    <uv-icon name="arrow-down-fill" size="10"></uv-icon>

                </view>
            </view>
            <view class="tab">
                <text>折扣</text>
                <view class="margin-top-5 margin-left-10">
                    <uv-icon name="arrow-down-fill" size="10"></uv-icon>

                </view>
            </view>
            <view class="tab">
                <text>筛选</text>
                <view class="margin-top-5 margin-left-10">
                    <uv-icon name="arrow-down-fill" size="10"></uv-icon>

                </view>
            </view>
        </view>

        <view class="">
            <goodsWaterfall />
        </view>
    </view>
</template>
<style lang="scss">
.product-tabs {
    background-color: #ffffff;
    width: 100%;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    margin-top: 20rpx;

    .tab {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        // position: relative;
        // width: 120rpx;

        view {
            // margin:  5rpx ;
            // position: absolute;
            // right: 0;
            // top: 0;
            // transform: translateY(-30%);
        }

        text {
            // margin-left: 20rpx;
        }

        image {
            margin-top: 20rpx;
        }
    }
}
</style>